<template>
  <div class="good-item-div">
    <div class="good-item">
      <img :src="good.logoImg" @click="showDetail">
      <div class="good-item-right">
        <div class="good-name" @click="showDetail"><span v-if="good.isHot === 1" style="background-color: red; font-size:10px;padding: 2px 4px;color: white;border-radius: 3px;"><van-icon color="white" name="fire" /></span>
          {{ good.goodName }}
        </div>
        <div class="good-tag">
          <template v-for="(item,index) in goodTag" v-bind:key="'good' + item.id">
            <van-tag v-if="index===0" size="medium" style="margin:5px;" type="primary">{{ item }}</van-tag>
            <van-tag v-else-if="index===1" size="medium" style="margin:5px;" type="warning">{{ item }}</van-tag>
            <van-tag v-else-if="index===2" size="medium" style="margin:5px;" type="success">{{ item }}</van-tag>
            <van-tag v-else-if="index===3" size="medium" style="margin:5px;" type="danger">{{ item }}</van-tag>
            <van-tag v-else size="medium" type="primary" style="margin:5px;">{{ item }}</van-tag>
          </template>
        </div>
        <!-- <div class="good-supplier">{{ good.parentName }}</div> -->
        <div class="commission-rule">
          <div round plain hairline type="danger" size="mini" style="color:#3682FFFF;text-decoration: underline;float:right" color="black" @click="showZl(good.goodName)">查看资料</div>
        </div>
      </div>
      <div style="width: 100%;height: 5px;clear: both;"></div>
      <div v-if="good.status === 100" style="display: flex;height:36px;line-height:36px;color:#FF884AFF">
        <div style="width:50%;">我的佣金：{{ good.myCommission!=undefined && good.myCommission!=null && good.myCommission>=0 ? good.myCommission  : '--' }}</div>
        <div style="width:50%;text-align:right;">代理佣金：{{ good.activeCommission!=undefined && good.activeCommission!=null && good.activeCommission>=0 ? good.activeCommission  : '--' }}</div>
      </div>
    </div>
    <div v-if="good.status === 100" style="width: 100%;height: 5px;clear: both;"></div>
    <div v-else style="width: 100%;height: 5px;clear: both;border-bottom:1px solid #f1f1f1"></div>
    <div v-if="good.status === 100" class="good-item-button">
      <van-button v-if="good.status === 100 && good.joinSeller === 0 && $hasPermi('system:goodinfo:joinseller')" plain hairline type="primary" size="small" style="float: right;font-size: 14px;" @click="changeJoinSeller(1)">加入分销</van-button>
      <van-button v-if="good.status === 100 && good.joinSeller === 1 && $hasPermi('system:goodinfo:joinseller')" plain hairline type="primary" size="small" style="float: right;font-size: 14px;" @click="changeJoinSeller(0)">移除分销</van-button>
      <van-button v-if="good.status === 100 && $hasPermi('system:goodinfo:sjandxj')" plain hairline type="primary" size="small" style="margin-right: 5px;float: right;font-size: 14px;" @click="changeStatus(1)">下架</van-button>
      <van-button v-if="good.status === 1 && $hasPermi('system:goodinfo:sjandxj')" plain hairline type="primary" size="small" style="margin-right: 5px;float: right;font-size: 14px;" @click="changeStatus(100)">上架</van-button>
      <van-button plain hairline type="primary" size="small" style="float: right;margin-right: 5px;font-size: 14px;" @click="changeCommissionRule" v-if="$hasPermi('system:goodinfo:yj')">佣金设置</van-button>
      <van-button type="primary" size="small" style="margin-right: 10px;float: right;font-size: 14px;" @click="showCommitOrderUrl" v-if="good.status === 100 && $hasPermi('system:goodinfo:query')">下单链接</van-button>
      <div class="clear:both"></div>
    </div>

    <van-dialog v-model:show="commissionRuleDlalog" title="佣金设置" width="90%" showCancelButton :allowHtml="true" confirmButtonText="保存" @confirm="updateCommissionRule">
      <div style="width: 94%;margin-left: 3%;background-color: #eee;font-size: 14px;margin-top: 5px;">
        <div style="height: 20px;width: 100%;"></div>
        <div style="width: 94%;margin-left: 3%;font-size: 14px;">
          <van-cell-group>
            <van-field label-width="50" v-model="form.activeCommission" label="佣金" placeholder="请输入已激活佣金" />
          </van-cell-group>
        </div>
        <div style="height: 20px;width: 100%;"></div>
      </div>
      <div style="height: 10px;width: 100%;"></div>
    </van-dialog>

    <!--详情-->
    <div class="admin-dlalog-shadow" v-if="detailDlglog" @click="detailDlglog = false"></div>
    <div class="admin-dlalog" v-if="detailDlglog">
      <div class="admin-dlalog-content">
        <div class="admin-dlalog-title-x">资料详情</div>
        <div class="admin-dlalog-body" style="padding:0;margin:0;">
          <row-content :bold="true" title="套餐名称" :content="detail.goodName" />
          <row-content title="在售状态" content="在售" />
          <row-content title="套餐归属" :content="detail.belongAddress ? detail.belongAddress : '无'" v-if="detail.belongAddress"></row-content>
          <row-content title="配送方式" :content="detail.psType ? detail.psType : '无'" v-if="detail.psType"></row-content>
          <row-content title="开卡方式" :content="detail.activedType" v-if="detail.activedType"></row-content>
          <row-content title="首冲渠道" :content="detail.firstAddChannel" v-if="detail.firstAddChannel"></row-content>
          <row-content title="年龄限制" :content="detail.ageLimit" v-if="detail.ageLimit"></row-content>
          <row-content title="套餐合约" :content="detail.packageDuration" v-if="detail.packageDuration"></row-content>
          <row-content title="违停复机" :content="detail.againActivedType" v-if="detail.againActivedType"></row-content>
          <row-content title="宣传渠道" :content="detail.publicizeChannel" v-if="detail.publicizeChannel"></row-content>
          <row-content title="套餐构成" :content="detail.packageComposition" v-if="detail.packageComposition"></row-content>
          <row-content title="禁发区域" :content="detail.prohibitArea" v-if="detail.prohibitArea"></row-content>
          <row-content title="其它备注" :content="detail.remark" v-if="detail.remark"></row-content>
          <row-content title="结算规则" :content="detail.resultRule" v-if="detail.resultRule"></row-content>
          <row-content title="激活图片" :content="''" v-if="detail.activityImgUrlList && detail.activityImgUrlList.length > 0">
            <template #content>
              <div v-for="img in detail.activityImgUrlList" :key="img.url">
                <img :src="img.url" style="width: 100%;" />
              </div>
            </template>
          </row-content>
        </div>
      </div>
    </div>
    <!--详情-->
  </div>
</template>

<script>
import {
  updateStatusShangJiaCustomStatus,
  updateCustomActiveCommission,
  updateJoinSeller,
  getGoodInfoByGoodName,
} from '@/api/admin/goodinfo'
import { showConfirmDialog, showToast } from 'vant'
import RowContent from '@/components/RowContent'

export default {
  components: { RowContent },
  props: {
    good: Object,
    index: Number,
  },
  created() {
    if (this.good.tagName) {
      this.goodTag = JSON.parse(this.good.tagName)
    }

    this.form.id = this.good.id
    this.form.activeCommission = this.good.activeCommission
  },
  data() {
    return {
      goodTag: [],
      commissionRule: '',
      commissionRuleDlalog: false,
      form: {},
      detailDlglog: false,
      detail: {},
    }
  },
  methods: {
    changeStatus(s) {
      let msg = ''
      if (s == 100) {
        msg = '上架'
      } else if (s == 1) {
        msg = '下架'
      }
      showConfirmDialog({
        title: '操作提示',
        message: '确定要将该产品' + msg + '吗？',
      })
        .then(() => {
          this.updateStatus(s, msg)
        })
        .catch(() => {
          // on cancel
        })
    },
    changeJoinSeller(val) {
      let msg = ''
      if (val === 1) {
        msg = '加入分销'
      } else if (val == 0) {
        msg = '移除分销'
      }
      showConfirmDialog({
        title: '操作提示',
        message: '确定要将该产品' + msg + '吗？',
      })
        .then(() => {
          this.updateJoinSeller(val, msg)
        })
        .catch(() => {
          // on cancel
        })
    },
    changeHot(s) {
      let msg = ''
      if (s == 1) {
        msg = '设置为'
      } else if (s == 0) {
        msg = '取消'
      }
      showConfirmDialog({
        title: '操作提示',
        message: '确定要将该产品' + msg + '热门吗？',
      })
        .then(() => {
          this.updateHot(s)
        })
        .catch(() => {
          // on cancel
        })
    },
    updateStatus(s, msg) {
      let reqdata = { id: this.good.id, customStatus: s }
      updateStatusShangJiaCustomStatus(reqdata).then((res) => {
        if (res.code == 200) {
          showToast(msg + '成功')
          this.restGoodPageData()
        } else {
          showToast(res.msg)
        }
      })
    },
    updateJoinSeller(joinSeller, msg) {
      updateJoinSeller(this.good.id, joinSeller).then((res) => {
        if (res.code == 200) {
          showToast(msg + '成功')
          //this.restGoodPageData()
          let a = { joinSeller: joinSeller, index: this.index }
          this.$emit('updateJoinSellerData', a)
        } else {
          showToast(res.msg)
        }
      })
    },
    updateHot(s) {
      console.info('热门更新：' + s)
    },
    showCommitOrderUrl() {
      this.$emit('showCommitOrderUrl', this.good.id)
    },
    showDetail() {
      this.$router.push({
        path: '/admin/goods/detail',
        query: { id: this.good.id },
      })
    },
    //改变佣金规则
    changeCommissionRule() {
      this.commissionRuleDlalog = true
    },
    //更新佣金信息
    updateCommissionRule() {
      console.info('更新的值：', this.form)
      let reqdata = {
        id: this.good.id,
        customActiveCommission: this.form.activeCommission,
      }
      updateCustomActiveCommission(reqdata).then((res) => {
        if (res.code == 200) {
          showToast('修改佣金成功')
          this.commissionRuleDlalog = false
          this.restGoodPageData()
        } else {
          showToast(res.msg)
        }
      })
    },
    restGoodPageData() {
      this.$emit('restGoodPageData')
    },
    showZl(goodName) {
      getGoodInfoByGoodName(goodName).then((res) => {
        if (res.code == 200) {
          this.detail = res.data
          this.detailDlglog = true
        } else {
          showToast(res.msg)
        }
      })
    },
  },
}
</script>
<style scoped>
.good-item-div {
  padding: 20px 20px 0px;
  background-color: white;
  overflow: hidden;
}

.good-item img {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px;
  border-radius: 5px;
}

.good-item .good-name {
  color: #333333ff;
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
}

.good-supplier {
  margin-top: 3px;
  font-size: 14px;
}

.commission-rule {
  margin-top: 8px;
  font-size: 14px;
  color: #ff1111;
}

.good-item-button {
  border-bottom: 1px solid #f1f1f1;
  height: 40px;
}
</style>
